@bgColor: #ff0000;
@grayColor: #f0f0f0;
@widthHeigt: 100px;
.edyBox {
  overflow: hidden;
  width: @widthHeigt;
  height: @widthHeigt;
  background: @bgColor;
  margin: 0 auto;
  position: relative;
  img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .left,.right {
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 80%;
    z-index: 1;
  }
  .right {
    left: auto;
    right: 0;
  }
  .box{
    overflow: hidden;
    background: @grayColor;
    width: 200%;
    height: 200%;
    position: absolute;
  }
  .left .box {
    right: 0;
    top: -50%;
    animation: leftBox 3s infinite forwards ;
    transform-origin: 100% 50%;
    animation-timing-function: cubic-bezier(0,0.5,0.3,0.3);
    -webkit-animation-timing-function: cubic-bezier(0,0.5,0.3,0.3);
  }
  .right .box {
    left: 0;
    top: -50%;
    animation: rightBox 3s infinite forwards;
    transform-origin:0 50%;
    animation-timing-function: cubic-bezier(0,0,0.5,0);
    -webkit-animation-timing-function: cubic-bezier(0,0,0.5,0);
  }
  .top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 34%;
    background: @grayColor;
    animation: top 3s infinite forwards;
  }
}
@keyframes rightBox {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(180deg);}
  100% {transform: rotate(180deg);}
}
@keyframes leftBox {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(180deg);}
}
@keyframes top {
  0% {top: 0;}
  50% {top: 0;}
  100% {top: -50%;}
}